const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin') // 插件 提取CSS， 压缩
const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  // mode: 'development',
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),  // 输出文件路径， 必须使用绝对路径
    filename: '[name][hash:8].js',  // hash
  },
  // 配置通过别名来吧原导入路径映射成一个新的导入路径
  resolve: {
    // 导入语句没有携带文件后缀时， webpack会自动带上后缀后尝试访问文件是否存在
    extensions: ['.js', '.vue', 'json'], //用于配置在尝试过程中用到的后缀列表
    alias: { // 别名
      components: path.join(__dirname, 'src/components') 
    }
  },
  module: {
    rules: [
      {
        test: /\.less$/, // 处理less文件
        use: [ // loader处理的顺序是从下到上
          // 'style-loader' // 生成一个 style 标签，将 css-loader 处理后的字符串加载到界面中
          MiniCssExtractPlugin.loader, // 将CSS提取到CSS文件中
          'css-loader', // 将 css 代码处理为符合 commonjs 规范的代码，处理完成之后的内容是字符串
          'less-loader' // 将 less 语法处理成 css 语法
        ]
      },
      {
        test: /\.css/,
        use: [
          MiniCssExtractPlugin.loader, // 将CSS提取到CSS文件中
          'css-loader', // 将 css 代码处理为符合 commonjs 规范的代码，处理完成之后的内容是字符串
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  // 下面的代码就好比是将我们当前配置中环境需要用到的 css处理语法加载进来
                  ['postcss-preset-env']
                ]
              }
            }
          }
        ]
      },
      {
        test: /\.js$/, // js 处理（打包、校验、兼容、压缩）
        loader: 'babel-loader',
        exclude: /node_modules/, //node_modules 文件夹下的文件不处理
        options: {
          presets: [ // 预设 只是一个平台， 本身不处理
            [
              '@babel/preset-env', // 这个预设置只帮助我们完成一些基本的兼容 ,
              {
                useBuiltIns: 'usage', // usage 会根据配置的浏览器兼容，以及你代码中用到的 API 来进行 polyfill，实现了按需添加。
                corejs: { version: 3 },
                targets: { // 浏览器版本
                  chrome: '60',
                  firefox: '60', 
                  ie: "9", 
                  safari: '10', 
                  edge: '17'
                }
              }
            ]
          ]
        }
      },
      {
        test: /\.(vue|js)$/,  // js 处理（校验）
        enforce: 'pre', // loader 先执行
        exclude: /node_modules/,
        loader: 'eslint-loader',
        options: {
          fix: true // 解决问题的代码
        }
      },
      { // 处理字体
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 10000
          }
        }
      },
      { // 处理图片
        test: /\.(png|gif|jpg)$/, // 处理图片
        loader: 'url-loader',
        options: {
          esModule: false,
          limit: 2 * 1024,
          outputPath: 'img'
        }
      },
      {
        test: /\.vue$/,
        exclude: /node_modules/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new MiniCssExtractPlugin({
      filename: 'css/[name].[hash:8].css', // 提取css文件中
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
      publicPath: './', // 公共路径
    }),
  ]
}